<template>
    <div class="signinform">
        <!-- logo -->
         <div class="logo">
            <img src="@/assets/images/logo_w.png" alt="" />
         </div>
        <!-- container -->
        <div class="container">
            <!-- main content -->
            <div class="w3l-form-info">
                <div class="w3l_form">
                    <div class="left_grid_info">
                        <img src="@/assets/images/login.svg" alt="" />
                    </div>
                </div>
                <div class="w3_info">
                    <p class="signin-label">管理用户登录</p>
                    <div class="input-group">
                        <span><i class="fas fa-user" aria-hidden="true"></i></span>
                        <input type="text" v-model="userName" placeholder="请输入用户账号" />
                    </div>
                    <div class="input-group">
                        <span><i class="fas fa-key" aria-hidden="true"></i></span>
                        <input type="password" v-model="password" placeholder="请输入密码" />
                    </div>
                    <!--
                    <div class="form-row bottom">
                        <div class="form-check">
                            <input type="checkbox" id="remenber" name="remenber" value="remenber">
                            <label for="remenber"> Remember me?</label>
                        </div>
                        <a href="#url" class="forgot">Forgot password?</a>
                    </div>
                    -->
                    <button class="btn btn-primary btn-block" @click="loginSubmit">登 录</button>
                    <!--
                    <p class="continue"><span>or Sign in with</span></p>
                    <div class="social-login">
                        <a href="#facebook">
                            <div class="facebook">
                                <span class="fab fa-facebook" aria-hidden="true"></span> Facebook
                            </div>
                        </a>
                        <a href="#google">
                            <div class="google">
                                <span class="fab fa-google-plus-g" aria-hidden="true"></span> Google
                            </div>
                        </a>
                    </div>
                    <p class="account">Don't have an account? <a href="#signup">Sign up</a></p>
                    -->
                </div>
            </div>
            <!-- //main content -->
        </div>
        <!-- //container -->
        <!-- footer -->
        <div class="footer">
            <p>Copyright &copy; 2024 Docooda. All Rights Reserved</p>
        </div>
        <!-- footer -->
    </div>
</template>
<script setup lang="ts">
import '@/assets/scripts/login/fontawesome.js'
import { ElMessage } from "element-plus"
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { JSEncrypt } from 'jsencrypt'
import { getCryptoKey, login } from '@/api/api'
import { useSecurityStore } from '@/stores/SecuStore'
import { LoginParam, User } from '@/types/type'

const userName = ref('');
const password = ref('');

const routers = useRouter();

let pubKey = '';
let cacheId = '';

const security = useSecurityStore();

getCryptoKey().then((result) => {
    if (result.data) {
        pubKey = result.data.key;
        cacheId = result.data.id;
    }
}).catch(() => {
    ElMessage({message: '未获取到密匙，请刷新', duration: 2000, type: 'error', center: true});
});

const loginSubmit = () => {
    const user = new User(userName.value, password.value);
    const cryptoStr = JSON.stringify(user);
    const param:LoginParam = {"cryptoStr": "", "userType":"01", "id": cacheId};
    if (pubKey) {
        const encryptor = new JSEncrypt();
        encryptor.setPublicKey(pubKey);
        let str = encryptor.encrypt(cryptoStr);
        if (typeof str === 'string') {
            param.cryptoStr = str;
        }
    } else {
        ElMessage({message: '未找到密匙，请刷新', duration: 2000, type: 'error', center: true});
    }
    login(param).then((result) => {
        if ("200" === result.code) {
            security.token = result.data;
            //路由跳转
            routers.push("/index");
            ElMessage.success("登录成功");
        } else {
            ElMessage({message: result.message, duration: 2000, type: 'error', center: true});
        }
    }).catch((error) => {
        if (error.response) {
            ElMessage({message: error.response.data.msg, duration: 2000, type: 'error', center: true});
        } else {
            ElMessage({message: '服务器错误', duration: 2000, type: 'error', center: true});
        }
    });
}
</script>
<style scoped src="@/assets/styles/login.css">

</style>